<template>
  <h2>安全设置</h2>
  <form @submit.prevent="submit" class="form">
    <label>原密码</label><input v-model="oldPassword" type="password" required />
    <label>新密码</label><input v-model="newPassword" type="password" minlength="6" required />
    <button :disabled="loading">修改密码</button>
    <p class="ok" v-if="ok">{{ ok }}</p><p class="err" v-if="err">{{ err }}</p>
  </form>
</template>

<script>
export default { name: 'AccountSecurity' }
</script>

<script setup>
import { ref } from 'vue'
import { accountApi } from '@/api/account'
const oldPassword=ref(''), newPassword=ref(''), loading=ref(false), ok=ref(''), err=ref('')
const submit=async()=>{ loading.value=true; ok.value=''; err.value=''
  try{ await accountApi.changePwd({oldPassword:oldPassword.value,newPassword:newPassword.value}); ok.value='已修改' }
  catch(e){ err.value=e?.response?.data?.message || '修改失败' }
  finally{ loading.value=false } }
</script>
<style scoped>
.form{display:grid;gap:8px;max-width:420px}
input{background:#f7f8fb;border:1px solid #e5e7eb;border-radius:8px;padding:8px}
button{padding:8px 12px;border:1px solid #409eff;background:#409eff;color:#fff;border-radius:8px}
.ok{color:#16a34a}.err{color:#dc2626}
</style>
